<template>
  <div class="w-[1150px] p-6 print-style bg-white h-full">
    <div class="flex justify-between w-full text-center items-center pl-60">
      <div class="flex-1 text-center text-[32px]">{{ getSystemConfig('HISNAME') }}</div>
      <BaseBarcode :value="tableData[0]?.barcode" class="w-60 text-right" />
    </div>
    <div class="text-center text-[22px] font-bold">长期医嘱单</div>
    <div class="flex-1 text-lg px-4">
      <div class="flex justify-between items-center my-4">
        <div class="flex">
          <div class="mr-2">{{ tableData[0]?.brName }}</div>
          <div class="mr-2">{{ tableData[0]?.brXb }}</div>
          <div class="mr-2">{{ tableData[0]?.brAge }}</div>
        </div>
        <div>科别：{{ tableData[0]?.kb }}</div>
        <div>床位:{{ tableData[0]?.cw }}</div>
        <div>入院:{{ tableData[0]?.rysj }}</div>
        <div>住院号:{{ tableData[0]?.zyh }}</div>
      </div>
      <div class="print-table">
        <div class="flex w-full">
          <div class="print-table-item flex-1 text-center">起始</div>
          <div class="print-table-item w-[320px] text-center">停止</div>
        </div>
        <div class="flex w-full">
          <div class="flex flex-1">
            <div class="print-table-item w-[120px]">医嘱时间</div>
            <div class="print-table-item flex-1">医嘱内容</div>
            <div class="print-table-item w-[100px]">医师签名</div>
            <div class="print-table-item w-[100px]">护士签名</div>
          </div>
          <div class="flex w-[320px]">
            <div class="print-table-item w-[120px]">医嘱时间</div>
            <div class="print-table-item w-[100px]">医师签名</div>
            <div class="print-table-item w-[100px]">护士签名</div>
          </div>
        </div>
        <div v-for="(item, index) in tableData" :key="index" class="flex w-full relative">
          <div v-if="(index + 1) % 5 === 0" class="absolute -left-5">{{ index + 1 }}</div>
          <div class="flex flex-1">
            <div class="print-table-item w-[120px]">{{ item.ksyzsj }}</div>
            <div class="print-table-item flex-1 flex items-center">
              <div v-if="item.list.length > 1" class="link-border-print"></div>
              <div>
                <div v-for="row in item.list" :key="row.yznr">
                  {{ row.yznr }}
                </div>
              </div>
            </div>
            <div class="print-table-item w-[100px]">{{ item.ksysqm }}</div>
            <div class="print-table-item w-[100px]">{{ item.kshsqm }}</div>
          </div>
          <div class="flex">
            <div class="print-table-item w-[120px]">{{ item.yzsj }}</div>
            <div class="print-table-item w-[100px]">{{ item.tzysqm }}</div>
            <div class="print-table-item w-[100px]">{{ item.tzhsqm }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// import dayjs from 'dayjs'
import { getSystemConfig } from '@/utils/systemConfig'

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})
const tableData = ref([])
watch(
  () => props.printData,
  (val) => {
    // 使用 reduce 方法来分组对象
    tableData.value = val.printData.detail.reduce((acc, item) => {
      const fid = item.fid
      // 检查累加器中是否已经有这个barcode的条目
      if (!acc.some((group) => group.fid === fid)) {
        // 如果没有，则创建一个新的条目
        acc.push({
          ...item,
          list: []
        })
      }
      // 找到对应的barcode条目，并向其list中添加yzmc和rq
      const group = acc.find((g) => g.fid === fid)
      group?.list.push({ ...item })
      return acc
    }, [])
  }
)
</script>
<style lang="less" scoped>
// @media print {
//   @page {
//     size: A4;
//     margin: 1in;
//   }
// }

.link-border-print {
  width: 8px;
  height: 75%;
  margin: 0 5px;
  border: 2px solid #000000;
  border-right: none;
}
.table-header {
  background: #eee;
  -webkit-print-color-adjust: exact;
}
</style>
